<template>
  <el-form
    class="p-2 enter-x login login-form"
    ref="ruleFormRef"
    :model="formData"
    :rules="getFormRules"
    :validate-on-rule-change="false"
    v-show="getShow"
    size="large"
  >
    <div class="enter-x login-title">
      {{ t('sys.login.systemSignIn') }}
      <span class="lang-switch">
        <AppLocalePicker :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
      </span>
    </div>
    <div class="enter-x login-sub-title">{{ t('sys.login.backendWelcome') }}</div>
    <!-- <el-form-item class="enter-x">
      <span
        :class="{ active: formData.loginAccountType == 1 }"
        class="account-type"
        @click="changeAccountType(1)"
        >{{ t('sys.login.domainLogin') }}</span
      >
      <span
        :class="{ active: formData.loginAccountType == 0 }"
        class="account-type"
        @click="changeAccountType(0)"
        >{{ t('sys.login.accountLogin') }}</span
      >
    </el-form-item> -->
    <el-form-item label="" prop="account" v-if="formData.loginAccountType == 0" class="enter-x">
      <el-input
        v-model="formData.account"
        :placeholder="t('sys.login.userName')"
        class="fix-auto-fill"
      />
    </el-form-item>
    <el-form-item label="" prop="areaAccount" class="enter-x" v-else>
      <el-input
        v-model="formData.areaAccount"
        :placeholder="t('sys.login.domainAccount')"
        class="fix-auto-fill input-with-select"
      >
        <template #prepend>
          <el-select v-model="formData.area" style="width: 120px">
            <el-option value="zt158" label="zt158" />
            <el-option value="sh158" label="sh158" />
            <el-option value="astronergy" label="astronergy" />
            <el-option value="anneng" label="anneng" />
            <el-option value="noark" label="noark" />
            <el-option value="xinhua" label="xinhua" />
          </el-select>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="" prop="password" class="enter-x">
      <el-input
        v-model="formData.password"
        :placeholder="t('sys.login.password')"
        type="password"
        show-password
        @keyup.enter.native="loginAction(ruleFormRef)"
      />
    </el-form-item>
    <!-- <el-row>
      <el-col :span="12" />
      <el-col :span="12" :style="{ 'text-align': 'right', 'margin-bottom': '24px' }">
        <a @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">{{
          t('sys.login.forgetPassword')
        }}</a>
      </el-col>
    </el-row> -->
    <el-form-item label="" prop="" class="enter-x">
      <el-button
        type="primary"
        :loading="loading"
        @click="loginAction(ruleFormRef)"
        :style="{ width: '100%' }"
        >{{ t('sys.login.loginButton') }}</el-button
      >
      <el-popover trigger="click" placement="top" :width="430">
        <template #reference>
          <button
            type="button"
            ref="slideTriggerBtn"
            style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1"
          ></button>
        </template>
        <slide-verify
          :l="42"
          :r="10"
          :w="404"
          :h="155"
          ref="slideVerifyRef"
          slider-text="向右滑动"
          :imgs="imgArrSrc"
          @success="onSuccess"
          @again="onAgain"
        />
      </el-popover>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
  import { reactive, ref, unref, computed } from 'vue';
  import LoginFormTitle from './LoginFormTitle.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { LoginStateEnum, useLoginState, useFormRules } from './useLogin';
  import { useDesign } from '/@/hooks/web/useDesign';
  import SlideVerify from 'vue3-slide-verify';
  import { AppLocalePicker } from '/@/components/Application';
  import 'vue3-slide-verify/dist/style.css';

  const { t } = useI18n();
  const { createErrorModal } = useMessage();
  const { prefixCls } = useDesign('login');
  const userStore = useUserStore();
  const { setLoginState, getLoginState } = useLoginState();
  const { getFormRules } = useFormRules();
  const ruleFormRef = ref();
  const loading = ref(false);
  const formData = reactive({
    loginAccountType: 0,
    area: 'zt158',
    areaAccount: '',
    account: '',
    password: '',
  });

  // slide-verify
  const prefix = import.meta.env.VITE_PUBLIC_PATH;
  const imgArrSrc = ref([
    `${prefix}resource/img/vi01.jpg`,
    `${prefix}resource/img/vi02.jpg`,
    `${prefix}resource/img/vi03.jpg`,
    `${prefix}resource/img/vi04.jpg`,
    `${prefix}resource/img/vi05.jpg`,
    `${prefix}resource/img/vi06.jpg`,
  ]);
  const slideVerifyRef = ref(null) as any;
  const onSuccess = (_) => {
    slideTriggerBtn.value.click();
    handleLogin();
  };
  const onAgain = () => {
    console.log('slider emit again');
  };

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

  const slideTriggerBtn = ref(null) as any;
  const loginAction = async (form) => {
    form.validate((v) => {
      if (v) {
        slideVerifyRef.value.refresh();
        slideTriggerBtn.value.click();
      }
    });
  };

  async function handleLogin() {
    try {
      loading.value = true;
      await userStore.login({
        grant_type: formData.loginAccountType == 0 ? 'password' : 'domain',
        scope: 'all',
        username: formData.loginAccountType == 0 ? formData.account : formData.areaAccount,
        password: formData.password,
        domainAlias: formData.area,
        goHome: false,
      });
    } catch (error) {
      createErrorModal({
        title: '错误提示',
        message: '网络异常，请检查您的网络连接是否正常!',
      });
    } finally {
      loading.value = false;
    }
  }

  const changeAccountType = (type: number): void => {
    formData.loginAccountType = type;
  };
</script>

<style lang="less" scoped>
  :deep(.el-select .el-input__inner) {
    min-width: auto;
  }

  :deep(.el-input-group .el-input__wrapper .el-input__inner) {
    min-width: auto;
  }

  @bg_color: #fff;
  @font_color: #666;
  .lang-switch {
    float: right;
    margin-top: 13px;
  }
  .login-form {
    overflow: hidden;
    .login-title {
      font-size: 26px !important;
      color: #333;
      margin: 0px auto 16px auto;
      font-weight: bold;
    }
    .login-sub-title {
      font-size: 14px !important;
      color: @font_color;
      line-height: 26px;
      margin-bottom: 28px;
      font-weight: bold;
    }
    .account-type {
      padding: 2px 0;
      margin-right: 32px;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   bottom: 0;
      //   left: 50%;
      //   transform: translate(-50%, 0);
      //   width: 40px;
      //   border: 1px solid transparent;
      // }
      &.active {
        color: #237ae4;
        &::after {
          border-color: #237ae4;
        }
      }
    }
    .other-actions {
      text-align: right;
      padding-right: 10px;
      button {
        color: @font_color;
      }
    }
    .login-btn {
      text-align: center;
      flex: 1;
    }

    .login-btn button {
      width: 100%;
    }
  }
</style>
